<template>
  <div class="mouseActionContainer">
    <el-tooltip
      class="item"
      effect="light"
      :content="
        useLeftKeySelectionRightKeyDrag
          ? $t('message.tooltips.rightClick')
          : $t('message.tooltips.leftClick')
      "
      placement="top"
    >
      <div
        class="btn xmind-iconfont"
        :class="[useLeftKeySelectionRightKeyDrag ? 'iconmouseR' : 'iconmouseL']"
        @click="toggleAction"
      ></div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object
  },
  isDark: {
    type: Boolean
  }
})

const useLeftKeySelectionRightKeyDrag = ref(false)

function toggleAction() {
  useLeftKeySelectionRightKeyDrag.value = !useLeftKeySelectionRightKeyDrag.value
  props.mindMap.updateConfig({
    useLeftKeySelectionRightKeyDrag:useLeftKeySelectionRightKeyDrag.value
  })
  // this.setLocalConfig({
  //   useLeftKeySelectionRightKeyDrag: useLeftKeySelectionRightKeyDrag.value
  // })
}

</script>
<style lang="less" scoped>
.mouseActionContainer {
  display: flex;
  align-items: center;

  &.isDark{
    .btn {
      color: hsla(0,0%,100%,.6);
    }
  }

  .item {
    margin-right: 12px;

    &:last-of-type {
      margin-right: 0;
    }
  }

  .btn {
    cursor: pointer;
    font-size: 18px;
    padding: 0px !important;
  }
}
</style>